<template>
    <view>
				<!-- <view style="background-color: #fff;height: 100upx;width: 750upx;position: relative;">
					<image src="../../../static/ai219.png" mode="widthFix" style="position: absolute;top: 16upx;left: 70upx;width: 50upx;"></image>
					<input  style=" padding: 0upx 50upx 0 100upx; width:90%;height: 80upx;line-height: 100upx; background-color: #F3F3F3;border-radius: 50upx;margin: 0upx 5%;" type="text" placeholder="搜索门店" />
				</view> -->
				<view style="display: flex;background-color: #fff;height: 60upx;justify-content: space-between;padding: 10upx 30upx 0;">
					 <view>
						<view style="margin-left: 30upx;display: inline-block;"  @click="province_select">
							<text>{{province_name}}</text>
							<image src="../../../static/xia.png" mode="widthFix" style="width: 32upx;vertical-align: middle;"></image>
						</view>
						<view style="margin-left: 30upx;display: inline-block;" @click="city_select">
							<text>{{city_name}}</text>
							<image src="../../../static/xia.png" mode="widthFix" style="width: 32upx;vertical-align: middle;"></image>
						</view>
					</view>
					<view v-show="isShow" @click="showOrHideMsg">
						列表
					</view>
					<view v-show="isTrue" @click="showOrHide">
					</view>
				</view>
				
				<view v-show="isTrue" style="margin-top: -14upx;">
					<view
					  @click="map(item.lng,item.lat,item)" v-for="(item, index) in list" :key="index" 
						style="height: 320upx;background-color: #fff;padding: 20upx 40upx;margin-top: 14upx;"
					>
						<view style="font-size: 34upx;height: 40upx;line-height: 40upx;font-weight: 555;margin-top: 20upx;">
							{{item.shop_name}}
						</view>
						<view style="height: 100upx;line-height: 120upx;">
							<text style="font-size: 26upx;">{{item.province_name}}{{item.city_name}}{{item.district_name}}{{item.address}}</text>
							<image src="../../../static/posision.png" mode="widthFix" style="width: 40upx;vertical-align: middle;margin-left: 20upx;"></image>
						</view>
						
						<view style="color: #ccc;height: 40upx;">
							营业时间: <text style="padding-left: 20upx;">10:00-22:00</text>
						</view>
						<view style="color: #ccc;height: 40upx;">
							电话号码:{{item.mobile}}
						</view>
					</view>
					<view style="text-align: center;color: #ccc;margin-top: 50upx;">
						没有更多门店了~
					</view>
				</view>
		
        <view class="page-body" v-show="isShow">
            <view class="page-section page-section-gap">
                <map style="width: 100%; height: 700px;" :longitude="longitude" :latitude="latitude" :markers="covers">
                </map>
								<view style="width: 100%;height: 200upx;position: fixed;bottom: 0;left: 0;background-color: #fff;">
									<view style="display: flex;margin-left: 50upx;margin-top: 20upx;">
										<view style="flex: 5;">
											<view>{{items.province_name}}{{items.city_name}}</view>
											<view style="font-size: 24upx;color: #ccc">{{items.district_name}}</view>
										</view>
										<view style="flex: 1.1;">
											<image src="../../../static/daohang.png" mode="widthFix" style="width: 90upx;margin-top: 10upx;" @click="openmap(latitude, longitude, items.district_name)"></image>
										</view>
									</view>
								</view>
            </view>
        </view>
				<!-- <pick-regions :default-regions="defaultRegions" @getRegions="handleGetRegions">
					<text>选择省市区<text style="margin-left: 30upx;"> {{regionsName}}</text></text>
				</pick-regions> -->
				<w-picker
					mode="selector"
					value=""
					default-type="name"
					:default-props="defaultProps"
					:options="all_list"
					@confirm="onConfirm($event,'selector')"
					@cancel="onCancel"
					ref="selector" 
				></w-picker>
				
				<w-picker
					mode="selector"
					value=""
					default-type="name"
					:default-props="defaultProps"
					:options="all_list"
					@confirm="onConfirm2($event,'selector')"
					@cancel="onCancel"
					ref="selector2" 
				></w-picker>
    </view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue"
	// import pickRegions from '@/components/pick-regions/pick-regions.vue'
	// var Map =  require("../../../js_sdk/fx-openMap/openMap.js");
	import Map from '@/js_sdk/fx-openMap/openMap.js'
	
	export default {
		  components:{
				wPicker
				// pickRegions
			},
	    data() {
				return {
					user_id:'',
					isShow: false,
					isTrue: true,
					regions:[],
					res:[],
					list:[],
					defaultRegions:['广东省','广州市','番禺区'],
					id:0, // 使用 marker点击事件 需要填写id
					latitude: 0, // 初始化经纬度
					longitude: 0,
					covers: [{  // 标记点
						longitude: 120.284904,
						latitude: 31.592789,
						iconPath: '../../../static/location.png'
					}],
					items: {},
					parent_id: '' ,// 父级地址id,
					province_name: '全部',
					province_id: '',
					city_name: '全部',
					city_id: '',
					all_list: [], // 省级地区列表
					defaultProps:{
						label: "name",
						value: "id"
					},
				}
	    },
			computed:{
				regionsName(){
					return this.regions.map(item=>item.name).join(' ') // 转为字符串
				}
			},
			onLoad:function(){
					uni.showLoading()
					uni.getStorage({
						key: 'user_id',
						success: (res) => {
							this.user_id = res.data
							this.setAjax()
						},
						fail: () => {
							uni.navigateTo({
								url: '../../login/login'
							});
						}
					});
				},
	    methods: {
				map(lng,lat,item){
					this.longitude = lng
					this.latitude = lat
					this.covers[0].longitude = lng
					this.covers[0].latitude = lat
					this.items = item
					this.showOrHide()
				},
				openmap (latitude, longitude, name) {
					Map.openMap(parseFloat(latitude), parseFloat(longitude), name)
				},
				province_select () {
					this.parent_id = 1
					this.city_name = "全部"
					this.city_id = 0 
					this.select()
					this.$refs['selector'].show();
				},
				city_select () {
					this.select()
					this.$refs['selector2'].show();
				},
				select () {
					// 选择省市
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/District/index',
						method: 'POST',
						data: {
							parent_id: this.parent_id,
							session_id: uni.getStorageSync("sessionid")
						},
						header:{'Content-Type': 'application/x-www-form-urlencoded'},
						success: res => {
							if(res.data.code == 999){
								uni.navigateTo({
									url:'/pages/999/999'
								})
							};
							this.all_list = res.data.data
						},
						fail: () => {},
						complete: () => {}
					});
				},
				onConfirm(res,type){ // 选择日期之后刷新页面
					this.province_name = res.result
					this.province_id = res.value
					this.parent_id = res.value
					this.setAjax()
				},
				onConfirm2(res,type){
					this.city_name = res.result// 市名称
					this.city_id = res.value // 市id
					this.setAjax()
				},
				//获取数据
				setAjax(){
					uni.hideLoading()
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/Shop/index',
						method: 'POST',
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						data:{
							province_id: this.province_id,
							city_id: this.city_id,
							session_id: uni.getStorageSync("sessionid")
						},
						success: res => {
							if(res.data.code == 999){
								uni.navigateTo({
									url:'/pages/999/999'
								})
							};
							this.list = res.data.data.list
							console.log(this.list)
						},
						fail: () => {},
						complete: () => {}
					 });	
				},
				onCancel(){},
				// 获取选择的地区
				handleGetRegions(regions){
					this.regions = regions
				},
				showOrHideMsg: function () {
					// 取反
					this.isShow = !this.isShow;
					this.isTrue = !this.isTrue;
				},
				showOrHide: function () {
					// 取反
					this.isShow = !this.isShow;
					this.isTrue = !this.isTrue;
				}
	    }
	}
	
</script>

<style lang="scss">
	
</style>
